<script setup>
import memberApi from '@/api/memberApi';
import { reactive, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import service from '@/api';

const members = ref([]);

// 分页信息
const pageInfo = reactive({
    page: 1,
    limit: 10,
    total: 0,
})

// 获取会员列表
loadMembers();

// 页码和页面大小更新
function loadMembers() {
    memberApi.search(pageInfo).then(result => {
        members.value = result.data.list;
        pageInfo.total = result.data.total;
    });
}

// 添加的相关操作
const addVisible = ref(false);
const addMember = ref({});
function showAdd() {
    addVisible.value = true;    // 显示添加窗口
}

function handleAdd(){
    memberApi.add(addMember.value).then(result=>{
        if (result.code == 0) {
            ElMessage({ message: '会员创建成功！', type: 'success' })
            addVisible.value = false;
            addMember.value = {};
        } else {
            ElMessage.error(result.msg);
        }
        // 刷新表格数据
        loadMembers();
    });
}

// 编辑的操作
const editVisible = ref(false);
const editMember = ref({});

function showEdit(row){
    editVisible.value = true;
    //editMember.value = Object.assign({}, row);   // 如果你有一个对象，再创建一个一样的对象？？？克隆
    //editMember.value = {...row}; // 作用同上
    editMember.value = JSON.parse(JSON.stringify(row));   // 深拷贝
    editMember.value.password = "";
    console.log(row);
}

function handleEdit(){
    memberApi.edit(editMember.value).then(result=>{
        if (result.code == 0) {
            ElMessage({ message: '编辑会员成功！', type: 'success' })
            editVisible.value = false;
            editMember.value = {};
        } else {
            ElMessage.error(result.msg);
        }
        // 刷新表格数据
        loadMembers();
    });
}

function handleRemove(member){
    ElMessageBox.confirm(
        '亲，确定要移除当前练么?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '不了',
            type: 'warning',
        }
    ).then(()=>{
        // 确定
        memberApi.remove(member.id).then(result=>{
            if (result.code == 0) {
                ElMessage({ message: '移除会员成功！', type: 'success' })
            } else {
                ElMessage.error(result.msg);
            }
            // 刷新表格数据
            loadMembers();
        });
    });
    
}

function onSearch(){
    pageInfo.page = 1;
    loadMembers();
}

</script>

<template>
    <div class="content">
        <el-form :model="pageInfo" :inline="true">
            <el-form-item label="名字" :label-width="60">
                <el-input v-model="pageInfo.name" placeholder="请输入会员名字"/>
            </el-form-item>
            <el-form-item label="电话" :label-width="60">
                <el-input v-model="pageInfo.phone" placeholder="请输入会员电话"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch"><el-icon><Search></Search></el-icon></el-button>
            </el-form-item>
        </el-form>
        <div class="bar">
            <el-button type="success" @click="showAdd" >创建会员</el-button>
        </div>
        <el-table :data="members" :stripe="true" :border="true" style="width: 100%">
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="phone" label="手机号" width="180" />
            <el-table-column prop="name" label="名字" />
            <el-table-column prop="balance" label="余额" :formatter="row=>'￥'+row.balance.toFixed(2)"/>
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column label="操作" width="315">
                <template #default="scope">
                    <el-button size="small" type="primary"
                        @click="showEdit(scope.row)"><el-icon><ShoppingTrolley/></el-icon>&nbsp;消费</el-button> 
                    <el-button size="small" type="warning"
                        @click="showEdit(scope.row)"><el-icon><Money/></el-icon>&nbsp;充值</el-button> 
                    <el-button size="small" type="success"
                        @click="showEdit(scope.row)"><el-icon><edit/></el-icon>&nbsp;编辑</el-button> 
                    <el-button size="small" type="danger"
                        @click="handleRemove(scope.row)"><el-icon><delete/></el-icon>&nbsp;删除</el-button> 
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="page" v-model:current-page="pageInfo.page" v-model:page-size="pageInfo.limit"
            :total="pageInfo.total" :page-sizes="[10, 20, 50, 100]" :background="true"
            layout="total, sizes, prev, pager, next, jumper" @change="loadMembers" />
    </div>

    <!-- 添加的弹窗 -->
    <el-dialog v-model="addVisible" title="创建新会员" width="500">
        <el-form :model="addMember">
            <el-form-item label="名字" :label-width="60">
                <el-input v-model="addMember.name" placeholder="请输入会员名字"/>
            </el-form-item>
            <el-form-item label="电话" :label-width="60">
                <el-input v-model="addMember.phone" placeholder="请输入会员电话"/>
            </el-form-item>
            <el-form-item label="密码" :label-width="60">
                <el-input v-model="addMember.password" show-password placeholder="请输入会员密码"/>
            </el-form-item>
            <el-form-item label="充值" :label-width="60">
                <el-input type="number" v-model="addMember.balance" placeholder="请输入充值金额"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="addVisible = false">取消</el-button>
                <el-button type="primary" @click="handleAdd">
                    创建
                </el-button>
            </div>
        </template>
    </el-dialog>

    <!-- 编辑的弹窗 -->
    <el-dialog v-model="editVisible" title="编辑会员" width="500">
        <el-form :model="editMember">
            <el-form-item label="名字" :label-width="60">
                <el-input v-model="editMember.name" placeholder="请输入会员名字"/>
            </el-form-item>
            <el-form-item label="电话" :label-width="60">
                <el-input v-model="editMember.phone" placeholder="请输入会员电话"/>
            </el-form-item>
            <el-form-item label="密码" :label-width="60">
                <el-input v-model="editMember.password" show-password placeholder="请输入会员密码"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="editVisible = false">取消</el-button>
                <el-button type="primary" @click="handleEdit">
                    编辑
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style >


</style>